<template>
  <div class="nav-top-group">
    <div class="box-group">
      <div class="item-text" v-if="userInfo != null" @click="router()">HuiYong</div>      

      <!-- 用户未登录 -->
      <div class="show-in-pc">
        <div class="home-user-not-login" v-if="userInfo == null">
          <div class="not-login-text" @click="router('userRegister')">注册</div>
          <div class="not-login-text" @click="toLogin">登录</div>
        </div>
      </div>
    </div>

    <div class="box-group"> 
      
      <div 
        class="blog-btn" 
        v-if="userInfo && userInfo.userId"
        @click="routerNewWindow('blogDetail?userId=' + userInfo.userId)">我的博客</div>
      
      <div 
        class="item-about" 
        @click="routerNewWindow('/blogDetail?tagId=202111250497')">关于</div>   

      <div class="user-info-box show-in-pc" v-if="userInfo && userInfo.userId" @mouseover="selectUser(true)" @mouseleave="selectUser(false)">
        <div class="user-name">{{userInfo.userName}}</div>
        <div class="user-image">
          <avatar :size="30" :src="userInfo.userImage"/>          
        </div>

        <div class="user-menu-box">
          <transition name="slide-top">
            <div class="user-menu-list" v-if="isSelectUser">
              <div class="user-info">
                <div class="menu-user-image">
                  <avatar :size="36" :src="userInfo.userImage"/>
                </div>
                <div class="menu-user-name">{{userInfo.userName}}</div>
              </div>

              <div class="menu-item" @click="router('userInfo')">账号设置</div>
              <div class="menu-item" @click="routerNewWindow('inviteCode')" v-if="isRootUser">邀请码管理</div>
              <div class="menu-item" @click="routerNewWindow('resume')" v-if="isRootUser">我的简历</div>
              <div class="menu-line"/>

              <div class="menu-item" @click="routerNewWindow('https://jobs.huiyong.online/xxl-job-admin/toLogin')" v-if="isRootUser">定时任务</div>
              <div class="menu-item" @click="routerNewWindow('https://swagger.huiyong.online/')" v-if="isRootUser">Api接口</div>
              <div class="menu-line" v-if="isRootUser"/>

              <div class="menu-item" @click="changeEdit" v-if="isHomePage">
                <div>编辑菜单</div>
                <div class="switch-btn">
                  <el-switch disabled v-model="isEdit"/>
                </div>
              </div>

              <div class="menu-item" @click="logout">
                <div>退出</div>
                <svg-icon icon-class="home-logout" class="menu-svg"/>
              </div>
            </div>  
          </transition>
        </div>
      </div>
    </div>
  </div> 

</template>

<script>
import LocalStorage from "@/utils/localStorage.js"
import Avatar from '@/components/Avatar.vue'

export default {
  props: ["userInfo"],

  components:{
    Avatar,
  },

  computed:{
    isRootUser(){
      return this.userInfo && this.userInfo.userId && this.userInfo.email == '1026946613@qq.com';
    },

    isHomePage(){
      return this.$route.fullPath == "/"
    }
  },

  data(){
    return{
      isSelectUser: false,
      isEdit : false,
    }
  },

  methods:{
    selectUser(value){
      this.isSelectUser = value
    },

    selectUserMenu(value){
      this.isSelectUserMenu = value
    },

    router(path){
      this.$router.push( path ? '/' +path : '/')
    },

    routerNewWindow(path){
      window.open(path, '_blank')
    },

    toLogin(){
      // 用户登录
      this.$router.replace('/userLogin?ref='+ window.location.origin + window.location.pathname)
    },

    // 编辑菜单
    changeEdit(){
      this.isEdit = !this.isEdit
      this.$emit('changeEdit', this.isEdit)
    },

    // 退出登录
    logout(){
      this.$confirm('是否确定退出登录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {          
          //  清楚用户信息
          LocalStorage.clear()
          this.$message({type: 'success',message: '已退出登录!'});
          location.reload()
        }).catch(() => {});
    }
  }
}
</script>

<style lang="less">
@import '@/assets/css/index.less';
.nav-top-group{
  height: 49px;
  border-bottom: 1px solid #dadfe6;
  background: white;
  .flex-center-between();

  .item-text{
    font-size: 14px;
    color: #202d40;
    font-weight: bold;
    margin: 0 10px;
    cursor: pointer;
  }

  .item-about{
    color: #666666;
    height: 28px;
    line-height: 28px;
    padding: 0 5px;
    font-size: 12px;
    margin: 0 15px;
    cursor: pointer;

    &:hover{
      background: #f5f7fa;
    }
  }

  .blog-btn{
    padding: 5px 7px;
    text-align: center;
    color: #fff;
    background: #ff4d4d;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
    font-size: 13px;

    &:hover, &:active{
      background-color: #fc1944;
    }
  }

  .box-group{
    .flex-center-start();

    .right-icon-item{
      margin-right: 10px;
      cursor: pointer;

      .menu-icon{
        height: 30px;
        width: 30px;
        border-radius: 3px;
        .flex-center-center();

        .menu-svg{
          font-size: 14px;
        }

        &:hover{
          background: #f5f7fa;
        }
      }
    }

    .user-info-box{
      .flex-center-start();
      // 用户头像
      .user-image{
        height: 49px;
        padding: 0 10px;
        .flex-center-center();
        position: relative;
        cursor: pointer;
      }

      .user-name{
        color: #666666;
        font-size: 12px;
      }
    }
  }

  .home-user-not-login{
    .flex-center-start();
    margin-left: 5px;

    .not-login-text{
      border-radius: 3px;
      color: #999999;
      font-size: 12px;
      height: 28px;
      line-height: 28px;
      padding: 0 5px;
      cursor: pointer;
      margin-left: 10px;

      &:hover{
        background: #f5f7fa;
        color: #4b9cf5;
      }
    }
  }
}

.user-menu-box{
  position: absolute;
  z-index: 1;
  right: 0px;
  top: 0px;
  margin-top: 50px;
  overflow: hidden;
}

.user-menu-list{
  width: 240px;
  padding: 4px 0;
  box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.12), 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.08);
  background: white;
  border-radius: 3px;
  overflow: hidden;
  margin: 2px 16px 16px;

  .user-info{
    padding: 0 16px;
    margin: 16px 0;
    .flex-center-start();

    .menu-user-image{
      width: 36px;
    }

    .menu-user-name{
      margin-left: 10px;
      color: #202d40;
      font-size: 15px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .menu-item{
    line-height: 32px;
    height: 32px;
    padding: 0 16px;
    color: #202d40;
    font-size: 14px;
    transition: all .3s ease;
    cursor: pointer;
    .flex-center-between();

    &:hover{
      background: #f5f7fa;
    }

    .switch-btn{
      margin-right: -10px;
      transform: scale(.6);
    }

    .menu-svg{
      color: #bdc0c6;
    }
  }

  .menu-line{
    height: 1px;
    background-color: #000;
    opacity: .04;
    margin: 4px 0;
  }
}

.slide-top-enter-active {
  animation: slide-top-active .25s ease;
}
.slide-top-leave-active {
  animation: slide-top-leave .25s ease;
}

@keyframes slide-top-active {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slide-top-leave {
  100% {
    transform: translateY(-100%);
  }
}
</style>
